<template>
  <!-- prettier-ignore -->
  <div>
    
    <div class="pl20 pr20">
      <el-form ref="form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item>
              <template slot="label">微信昵称</template>
              <el-input size="small" placeholder="请输入" v-model="parameter.nickname"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="4">
            <el-form-item>
              <template slot="label">备注名</template>
              <el-input size="small" placeholder="请输入" v-model="parameter.nickname"></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="4">
            <el-form-item>
              <template slot="label">电话号码</template>
              <el-input size="small" placeholder="请输入" v-model="parameter.phoneNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <template slot="label">资源渠道</template>
              <el-select size="small" placeholder="请选择" v-model="parameter.resourceChannels" multiple collapse-tags filterable>
                <el-option v-for="item in conditional.resourceChannels.options"
                  :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="4">
            <el-form-item>
              <template slot="label">是否关注</template>
              <el-select size="small" placeholder="请选择" v-model="parameter.focusOn">
                <el-option v-for="item in conditional.focusOn.options"
                  :key="item.value" :label="item.label" :value="item.value">{{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="4">
            <el-form-item>
              <template slot="label"><div class="spLabel">是否重复资源</div></template>
              <el-select size="small" placeholder="请选择" v-model="parameter.repeatResources">
                <el-option v-for="item in conditional.repeatResources.options"
                  :key="item.value" :label="item.label" :value="item.value">{{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="4">
            <el-form-item>
              <template slot="label"><div class="spLabel">是否全局重复</div></template>
              <el-select size="small" placeholder="请选择" v-model="parameter.globalRepeat">
                <el-option v-for="item in conditional.globalRepeat.options"
                  :key="item.value" :label="item.label" :value="item.value">{{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="4">
            <el-form-item>
              <template slot="label">删除</template>
              <el-select size="small" placeholder="请选择" v-model="parameter.flagDelete">
                <el-option v-for="item in conditional.flagDelete.options"
                  :key="item.value" :label="item.label" :value="item.value">{{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- {{ conditional.workbench.options }} -->
          <!-- {{ conditional.workbench.DEFAULT }}-->
          <el-col :span="4">
            <el-form-item>
              <template slot="label">工作台</template>
              <el-select size="small" placeholder="请选择" v-model="parameter.workbench" multiple collapse-tags filterable>
                <el-option v-for="item in conditional.workbench.options"
                  :key="item.value" :label="item.label" :value="item.value">
                  {{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4" v-show="$store.getters['userInfo/getIsLoading'].departmen">
            <el-form-item>
              <template slot="label">归属部门</template>
              <!-- <el-select size="small" placeholder="请选择" v-model="parameter.department" @change="reAjaxBelongToSales($event)">
                <el-option v-for="item in conditional.department.options"
                  :key="item.value" :label="item.label" :value="item.value">{{ item.label }}
                </el-option>
              </el-select> -->
              <el-cascader size="small" placeholder="请选择"
                :options="conditional.department.options"
                v-model="parameter.department"
                :props="{multiple: true,checkStrictly: true,
                  emitPath: false,}" collapse-tags :show-all-levels="false"
                popper-class="my-popper-class"
                clearable >
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="4" v-show="$store.getters['userInfo/getIsLoading'].sales">
            <el-form-item>
              <template slot="label">归属人员</template>
              <el-select size="small" placeholder="请选择" 
                v-model="parameter.belongToSales" multiple collapse-tags filterable @change="按员工id加载员工微信id($event)">
                <el-option v-for="item in optionsBelongToSales"
                  :key="item.key" :label="item.label" :value="item.value">
                  {{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" v-if="$store.getters['userInfo/getIsLoading'].sales">
            <el-form-item>
              <template slot="label">微信id</template>
              <el-select size="small" placeholder="请选择" v-model="parameter.searchUserId" multiple collapse-tags filterable>
                <el-option v-for="item in optsWXid"
                  :key="item.key" :label="item.label" :value="item.value">
                  {{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <template slot="label">标签</template>
              <el-cascader size="small" placeholder="请选择"
                :options="conditional.theLabel.options | esId2esName(conditional.workbench.options)"
                v-model="parameter.theLabel"
                :props="{multiple: true,checkStrictly: true,
                  emitPath: false,}" collapse-tags :show-all-levels="false"
                popper-class="my-popper-class"
                clearable >
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <template slot="label">添加时间</template>
              <el-date-picker size="small" class="bg-grey" v-model="parameter.releaseTime"
                value-format="yyyy-M-dd H:m:s" :default-time="['0:0:0', '23:59:59']"
                type="datetimerange" range-separator="-" start-placeholder="开始" end-placeholder="结束">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item>
              <template slot="label"><div class="spLabel">客户加群情况</div></template>
              <el-select size="small" placeholder="请选择" v-model="parameter.joinGroup_State">
                <el-option v-for="item in conditional.joinGroup_State.options"
                  :key="item.value" :label="item.label" :value="item.value">{{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <template slot="label">激活时间</template>
              <el-date-picker size="small" class="bg-grey" v-model="parameter.jhTime"
                value-format="yyyy-M-dd H:m:s" :default-time="['0:0:0', '23:59:59']"
                type="datetimerange" range-separator="-" start-placeholder="开始" end-placeholder="结束">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <template slot="label"><div class="spLabel">开发资源排查</div></template>
              <el-select size="small" placeholder="请选择" v-model="parameter.开发资源排查" clearable>
                <el-option v-for="item in opts开发资源排查"
                  :key="item.key" :label="item.label" :value="item.value">
                  {{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <!-- <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item>
              <template slot="label">登录时间</template>
              <el-date-picker size="small" class="bg-grey" v-model="parameter.lastLoginTime"
                type="datetimerange" range-separator="-" start-placeholder="开始" end-placeholder="结束">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row> -->
      </el-form>
    </div>
    <div class="pt5 pb10">
      <el-button size="small" type="primary" @click="search()" :loading="loading || loading2">
        <i class="fa fa-fw iconfont icon-search"></i>查询
      </el-button>
      <el-button size="small" type="warning" @click="reset()" :loading="loading || loading2">
        <i class="fa fa-fw iconfont icon-reset"></i>重置
      </el-button>
      <el-button size="small" type="info" plain @click="refresh()" :loading="loading || loading2">
        <i class="fa fa-fw iconfont icon-refresh"></i>刷新
      </el-button>
      <!-- <div class="dis-ib">一键设置若干条件，并立即查询</div> -->
      <el-button-group class="ml20">
        <el-button size="mini" v-for="(item, key) in dataTimeRangePicker" :key="key" @click="quickSetupTime(item.value)">{{ item.label }}</el-button>
      </el-button-group>
      <el-button-group>
        <el-button size="mini" v-for="(item, key) in quickResetPicker" :key="key" @click="quickReset(item.value)">{{ item.label }}</el-button>
      </el-button-group>
      <div class="dis-ib align-cm">
        <el-checkbox-group v-model="parameter.isLoginStatus" size="mini" @change="handleCheckedAsSwitch($event);search(true)">
          <el-checkbox-button label="0" :value="0">未听课</el-checkbox-button>
          <el-checkbox-button label="1" :value="1">听课</el-checkbox-button>
        </el-checkbox-group>
      </div>
      <div class="dis-ib align-cm">
        <el-checkbox-group v-model="parameter.isInstallationIndicators" size="mini" @change="handleCheckedAsSwitch($event);search(true)">
          <el-checkbox-button label="0" :value="0">未安装指标</el-checkbox-button>
          <el-checkbox-button label="1" :value="1">安装指标</el-checkbox-button>
        </el-checkbox-group>
      </div>
      <div class="dis-ib align-cm">
        <el-checkbox-group v-model="parameter.isAttentionWeChatWorkbench" size="mini" @change="handleCheckedAsSwitch($event);search(true)">
          <el-checkbox-button label="0" :value="0">未关注</el-checkbox-button>
          <el-checkbox-button label="1" :value="1"><span class="text-red">关注</span></el-checkbox-button>
          <el-checkbox-button label="2" :value="2"><span class="text-green">取关</span></el-checkbox-button>
        </el-checkbox-group>
      </div>
      <slot name="other"></slot>
    </div>
    <div class="fz14 fc-gray55" v-if="stateData.总添加 != 0">
      <div class="dis-ib">总添加：
        <i class="el-icon-loading" v-if="loading2"></i>
        <span class="fc-gray15" v-else>{{ stateData.总添加 }}</span>
      </div>
      <div class="dis-ib">重复添加：
        <i class="el-icon-loading" v-if="loading2"></i>
        <span class="fc-gray15" v-else>{{ stateData.重复添加 }}</span>
      </div>
      <div class="dis-ib">重复率：
        <i class="el-icon-loading" v-if="loading2"></i>
        <span class="fc-gray15" v-else>{{ stateData.重复率 }}</span>
      </div>
      <div class="dis-ib">新增添加：
        <i class="el-icon-loading" v-if="loading2"></i>
        <span class="fc-gray15" v-else>{{ stateData.新增添加 }}</span>
      </div>
      <div class="dis-ib">新增添加率：
        <i class="el-icon-loading" v-if="loading2"></i>
        <span class="fc-gray15" v-else>{{ stateData.新增添加率 }}</span>
      </div>
      <!-- <div class="dis-ib">工作台冒泡率：<span class="fc-gray15">{{stateData.工作台冒泡率}}</span></div> -->
      <!-- <div class="dis-ib">关注数：<span class="fc-gray15">{{ stateData.关注数 }}</span></div> -->
      <!-- <div class="dis-ib">关注率：<span class="fc-gray15">{{ stateData.关注率 }}</span></div> -->
      <div class="dis-ib">删除数：
        <i class="el-icon-loading" v-if="loading2"></i>
        <span class="fc-gray15" v-else>{{ stateData.删除数 }}</span>
      </div>
      <div class="dis-ib">删除率：
        <i class="el-icon-loading" v-if="loading2"></i>
        <span class="fc-gray15" v-else>{{ stateData.删除率 }}</span>
      </div>
    </div>
    <!-- {{ userInfo.分公司名 }} -->
    <el-table class="mt5 myStyle" style="width: 100%" ref="table" height="70vh"
      v-loading="loading||loading2" :data="tableData"
      highlight-current-row
      @sort-change="handleSortChange"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="44px"></el-table-column>
      <el-table-column label="头像" width="50px">
        <template slot-scope="scope">
          <el-image class="face" :src="scope.row.avatar" fit="fill">
            <div slot="error" class="align-cm bg-gray80">
              <i class="fa fa-user-circle"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="微信昵称" min-width="80px" max-width="256px">
        <template slot-scope="scope">
          <div
            :class="{'text-overflow': true, 'text-red': scope.row.isRepetition, }">
            {{ scope.row.name }}
          </div>
          <!-- <el-button v-if="isDev" type="text" @click="准备报表审核(scope.row)">生成报表</el-button> -->
        </template>
      </el-table-column>
      <el-table-column label="备注名" min-width="128px">
        <template slot-scope="scope">
          <div class="dis-ib align-lm text-overflow" style="max-width: 80%"> {{ scope.row.remark }}</div>
          <el-button type="text" @click="editNote(scope.row)"><i class="iconfont icon-edit"></i></el-button>
        </template>
      </el-table-column>
      <el-table-column label="手机号码" min-width="128px">
        <template slot-scope="scope">
          <!-- {{ scope.row.allPhoneNumber }} -->
          <!-- {{ scope.row.phoneNumber }} -->
          {{ reShowPhone(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column label="拨号管理" width="88px">
        <template slot-scope="scope">
          <!-- <span class="">{{ scope.row.id }}</span> -->
          <button class="btn btn-size20 btn-green" @click="dialNumberManagement(scope.row, '拨号')"><i class="iconfont icon-phone"></i></button>
          <button class="btn btn-size20" @click="dialNumberManagement(scope.row, '管理')"><i class="iconfont icon-push"></i></button>
        </template>
      </el-table-column>
      <el-table-column label="进线渠道" :width="conditional.resourceChannels.options | getMinWidth">
        <template slot-scope="scope">{{ scope.row.fromSource }}</template>
      </el-table-column>
      <el-table-column label="开发资源排查" width="160px">
        <template slot-scope="scope">
          <span v-if="[0,''].includes(scope.row.pn_Resources_Id)">没有对应开发资源</span>
          <el-button v-else size="mini" @click="查看开发资源排查数据(scope.row)">{{ scope.row.blackState }}</el-button>
        </template>
      </el-table-column>

      <el-table-column  prop="firtLoginVideoLiveTime" label="激活IP时间"  width="180px">
        <!-- sortable="custom" -->
        <template slot-scope="scope">
          {{$moment(scope.row.firtLoginVideoLiveTime).isValid()?$moment(scope.row.firtLoginVideoLiveTime).format("YYYY-M-D H:m:s"):'--'}}
        </template>
      </el-table-column>
      <el-table-column  prop="LastLoginTime" label="最后到课时间"  width="180px">
        <!-- sortable="custom" -->
        <template slot-scope="scope">
          {{$moment(scope.row.lastLoginTime).isValid()?$moment(scope.row.lastLoginTime).format("YYYY-M-D H:m:s"):'--'}}
        </template>
      </el-table-column>
      <el-table-column label="关注状态">
        <template slot-scope="scope">
          <span v-if="scope.row.followWith =='已关注'" class="text-red">已关注</span>
          <span v-if="scope.row.followWith == '取关'" class="text-green">取关</span>
          <span v-if="scope.row.followWith == '--'" class="">--</span>
        </template>
      </el-table-column>

      <el-table-column label="进群情况" width="80px">
        <template slot-scope="scope">{{ scope.row.joinGroup_State | value2Label(conditional.joinGroup_State.options) }}</template>
      </el-table-column>
      <el-table-column label="资源渠道绑定" width="160px">
        <template slot-scope="scope">
          <!-- prettier-ignore -->
          <template v-if="scope.row.pn_Resources_Id > 0">
            <span class="text-green"><i class="el-icon-success"></i> 已绑定</span>
            <!-- <el-button type="text" @click="bus.$emit('工作台资源绑定',{temp:scope.row})">修改绑定</el-button> -->
            <!-- 9-27：单纯配合后端，将入口去掉，但保留后续及所有方法 -->
          </template>
          <template v-else>
            <el-button type="text" @click="bus.$emit('工作台资源绑定',{temp:scope.row})">去绑定</el-button>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="股票代码">
        <template slot-scope="scope">{{ scope.row.stockCode }}</template>
      </el-table-column>
      <el-table-column label="外企标签" width="280px">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :placement="scope.$index < tableData.length * 0.8 ? 'right':'right-end'">
            <div class="dis-ib">
              <el-tag v-if="scope.row.tagString.length > 0" type="info">{{ scope.row.tagString[0] }}</el-tag>
              <el-tag v-if="scope.row.tagString.length > 1" type="info">+{{ scope.row.tagString.length - 1 }}</el-tag>
            </div>
            <div slot="content">
              <div v-for="(v,k) in scope.row.tagString" :key="k">{{ v }}</div>
            </div>
          </el-tooltip>
          <el-button size="mini" @click="editTheLabel(scope.row)">标签修改</el-button>
        </template>
      </el-table-column>
      <el-table-column label="归属销售" width="300px">
        <template slot-scope="scope">{{ scope.row.realName }}</template>
      </el-table-column>
      <el-table-column label="添加时间" width="100px">
        <template slot-scope="scope">{{$moment(scope.row.addTime).format("YYYY-M-D")}}</template>
      </el-table-column>
      <el-table-column label="外企描述">
        <template slot-scope="scope">
          <el-button type="text" @click="bus.$emit('查看描述',{temp:scope.row})">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="scope">
          <el-button type="text" @click="bus.$emit('查看备注',{temp:scope.row})">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="录音" >
        <template slot-scope="scope">
          <el-button type="text" @click="bus.$emit('查看录音',{tempData:scope.row})">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="报表" width="200px" v-if="$config.needRF">
        <template slot-scope="scope">
          <el-button type="text" @click="调用会话存档(scope.row)">对话历史</el-button>
          <el-button type="text" @click="准备报表审核(scope.row)">生成报表</el-button>
        </template>
      </el-table-column>
      <el-table-column label="归属企微" width="200px">
        <template slot-scope="scope">{{ scope.row.companyName }}</template>
      </el-table-column>
      <el-table-column label="访问状态" width="120px">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isAccessToRoom" :active-color="COLOR_Red" @change="set访问状态($event,scope.row)"></el-switch>
          <span :class="{'text-orange':!!scope.row.isAccessToRoom,'text-gray':!scope.row.isAccessToRoom}">{{ !!scope.row.isAccessToRoom?'已禁言':'正常' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="120px">
        <template slot-scope="scope">
          <template v-if="scope.row.isTransaction=='1'">已成交</template>
          <el-button v-else type="text" @click="clinchADeal(scope.row)">成交登记</el-button>
          
        </template>
      </el-table-column>
    </el-table>
    
    <div class="dis-flex flex-sbc">
      <div class="fz12">
        <span class="text-red">昵称标红：</span>重复进线
        <!-- 添加时间标红：销售删除外部联系人 -->
      </div>
      <el-pagination class="align-rm"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page.current"
        :page-sizes="[10, 20,50,100]" :page-size.sync="page.size" :total="page.total"
        layout="total, prev, pager, next, sizes">
      </el-pagination>
    </div>
  </div>
</template>

<script src="./mainData.js"></script>
<style scoped lang="less">
@import url('../../assets/config.less');
.btn-size20 {
  display: inline-block;
  line-height: 20px;
  font-size: 18px;
  width: 20px;
  text-align: center;
  cursor: pointer;
  &:hover {
    background-color: @baseGrey2;
  }
  &.btn-green {
    color: @baseGreen;
  }
}
.spLabel {
  position: relative;
  top: 2px;
  line-height: 18px;
}
.el-form-item {
  margin-bottom: 16px;
}
</style>
